<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<script src="html5plus://ready"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<script src="../../js/fanhui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.head {
				z-index: 2;
				position: fixed;
				top: 20px;
				left: 15px;
				color: white;
			}

			.padding {
				padding: 10px 15px 0px;
			}

			.daxiao {
				font-size: 14px;
				color: darkgray;
			}

			.bg-color {
				background-color: #F7F8FA;
			}

			.pd-bottom {
				padding-bottom: 10px;
			}

			.mg-top {
				margin-top: 20px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<van-row>
				<van-col span="24" class="asd">
					<van-icon size="24px" name="arrow-left" class="head" @click="fanhui"></van-icon>
					<van-swipe :autoplay="3000">
						<van-swipe-item v-for="(image, index) in images" :key="index">
							<img :src="image.src" onerror="this.src='../../img/beng-1.jpg'" style="width: 100%;"/>
						</van-swipe-item>
					</van-swipe>
				</van-col>
			</van-row>

			<van-row class="padding">
				<van-col span="24">
					<h3>
						{{Name}}
					</h3>
				</van-col>
			</van-row>

			<van-row class="padding">
				<van-col span="24">
					<h2 class="red">￥{{MarketPrice}}</h2>
				</van-col>
			</van-row>

			<van-row class="padding daxiao">
				<van-col span="10">
					<span>快递：免运费</span>
				</van-col>
				<van-col span="10">
					<span>销量290</span>
				</van-col>
			</van-row>

			<van-row class="padding bg-color pd-bottom">
				<van-col span="8">
					<span class="red">
						<van-icon size="14px" name="passed"></van-icon>
						正品保证
					</span>
				</van-col>
				<van-col span="8">
					<span class="red">
						<van-icon size="14px" name="passed"></van-icon>
						极速退款
					</span>
				</van-col>
				<van-col span="8">
					<span class="red">
						<van-icon size="14px" name="passed"></van-icon>
						两天内发货
					</span>
				</van-col>
			</van-row>

			<van-row class="padding mg-top">
				<van-col span="24">
					<span>商品详情</span>
				</van-col>
			</van-row>
			<img :src="CoverImage" onerror="this.src='../../img/beng-1.jpg'" style="width: 100%;"/>


			<van-row class="padding mg-top">
				<van-col span="24">
					<van-goods-action>
						<van-goods-action-mini-btn :icon="tb" icon-class="red" text="收藏" @click="onClickMiniBtn"></van-goods-action-mini-btn>
						<van-goods-action-big-btn text="加入购物车" @click="onClickGouWuChe"></van-goods-action-big-btn>
						<van-goods-action-big-btn primary text="立即购买" @click="onClickLiJiGouMai"></van-goods-action-big-btn>
					</van-goods-action>
				</van-col>
			</van-row>
		</div>
	</body>
	<script type="text/javascript">
		var newUser = localStorage.getItem("user"); //从localStorage里取数据(字符串格式)
		newUser = JSON.parse(newUser); //把字符串格式转换成Json格式
		var vm = new Vue({
			el: "#app",
			data: {
				images: [], //商品轮播图
				Name: "", //商品名称
				MarketPrice: "", //商品价格
				CoverImage: "", //商品详情
				tb: "like-o", //收藏图标
				shopcar:newUser.UserData.Phone
			},
			created: function() {
				this.getdata()
			},
			methods: {
				fanhui: function() { //返回商品页
					plus.webview.close(plus.webview.currentWebview(), "slide-out-left");
				},
				onClickMiniBtn: function() { //点击收藏按钮
					var _this = this;
					if (newUser == null) {
						_this.$dialog.confirm({
							title: '您未登录',
							message: "确认登陆吗",
						}).then(() => {
							plus.webview.create("../mainHtml/login.html", "login", {}, {
								open: "xq"
							}).show();
						}).catch(() => {
							_this.$toast("由于您未登录所以不能进行该操作");
						});
					} else {
						if (_this.tb == "like-o") {
							ajax({ //添加收藏
								url: "http://dsapi.ysd3g.com/API/CollectGoods",
								dataType: "jsonp",
								data: {
									goodsId: plus.webview.currentWebview().ID,
									key: newUser.Key
								},
								success: function(res) {
									if (res.Error) {
										_this.$toast(res.Msg)
									} else {
										_this.tb = "like";
										_this.$toast("收藏成功");
										var sc = plus.webview.getWebviewById("sc");
										sc.reload();
									}
								}
							})
						} else {
							ajax({ //取消收藏
								url: "http://dsapi.ysd3g.com/api/cancelCollectGoods",
								dataType: "jsonp",
								data: {
									goodsId: plus.webview.currentWebview().ID,
									key: newUser.Key
								},
								success: function(res) {
									console.log(res)
									if (res.Error) {
										_this.$toast(res.Msg)
									} else {
										_this.tb = "like-o";
										_this.$toast("取消收藏成功");
										var sc = plus.webview.getWebviewById("sc");
										sc.reload();
									}
								}
							})

						}
					}
				},
				onClickGouWuChe: function() { //加入购物车
					var _this = this;
					var id = plus.webview.currentWebview().ID;
					if (newUser == null) { //判断是否登陆
						_this.$dialog.confirm({
							title: '您未登录',
							message: "确认登陆吗",
						}).then(() => {
							plus.webview.create("../mainHtml/login.html", "login", {}, {
								open: "xq"
							}).show();
						}).catch(() => {
							_this.$toast("由于您未登录所以不能进行该操作");
						});
					} else {
						var key = newUser.Key;
						var goods = [{ //存放购物车商品id和数量
							goodsId: id,
							goodsCount: 1
						}]
						var goodsobj = { //当前商品的id和数量
							goodsId: id,
							goodsCount: 1
						}
						var newarr;
						if (localStorage.getItem("shopcar") == null) {
							var arr = JSON.stringify(goods); //把Json格式的用户信息转换成字符串存放到变量里
							localStorage.setItem("shopcar", arr); //把选择的商品添加到缓存里arr是一个字符串数组,取值的时候需要转换为JSON格式
							_this.$toast("加入购物车成功");
						} else {
							newarr = JSON.parse(localStorage.getItem("shopcar"));
							for (var i = 0; i < newarr.length; i++) {
								if (newarr[i].goodsId == id) {
									newarr[i].goodsCount++;
									localStorage.removeItem("shopcar"); //清除缓存
									localStorage.setItem("shopcar", JSON.stringify(newarr));
									_this.$toast("加入购物车成功");
									var shop = plus.webview.getWebviewById("shop");
									shop.reload();
									return;
								}
							}
							newarr.push(goodsobj);
							localStorage.removeItem("shopcar"); //清除缓存
							localStorage.setItem("shopcar", JSON.stringify(newarr));
							_this.$toast("加入购物车成功");
						}
						var shop = plus.webview.getWebviewById("shop");
						shop.reload();
					}
				},
				onClickLiJiGouMai: function() { //购买
					var _this = this;
					if (newUser == null) {
						_this.$dialog.confirm({
							title: '您未登录',
							message: "确认登陆吗",
						}).then(() => {
							plus.webview.create("../mainHtml/login.html", "login", {}, {
								open: "xq"
							}).show();
						}).catch(() => {
							_this.$toast("由于您未登录所以不能进行该操作");
						});
					} else {
						var toast = vm.$toast.loading({
							duraion: 0,
							forbidClick: true,
							message: '正在生成订单'
						});
						var pay = plus.webview.create("../mainHtml/pay.html", "pay", {}, {
							ID: plus.webview.currentWebview().ID,
							pay: "xq"
						});
						pay.show();
					}
				},
				getdata: function() { //获取商品
					var _this = this;
					if (newUser == null) {
						ajax({ //请求产品数据
							url: "http://dsapi.ysd3g.com/API/GoodsDetail",
							dataType: "jsonp",
							data: {
								gId: plus.webview.currentWebview().ID
							},
							success: function(res) {
								_this.images = res.Detail.SwipeImages;
								_this.Name = res.Detail.Name;
								_this.MarketPrice = res.Detail.MarketPrice;
								_this.CoverImage = res.Detail.CoverImage;
								console.log(res);
							}
						})
					} else {
						ajax({ //请求产品数据
							url: "http://dsapi.ysd3g.com/API/GoodsDetail",
							dataType: "jsonp",
							data: {
								gId: plus.webview.currentWebview().ID
							},
							success: function(res) {
								_this.images = res.Detail.SwipeImages;
								_this.Name = res.Detail.Name;
								_this.MarketPrice = res.Detail.MarketPrice;
								_this.CoverImage = res.Detail.CoverImage;
								console.log(res);
							}
						});
						ajax({ //请求收藏列表
							url: "http://dsapi.ysd3g.com/api/MyGoodsCollectList",
							dataType: "jsonp",
							data: {
								p: 1,
								key: newUser.Key
							},
							success: function(res) {
								console.log(res);
								for (var i = 0; i < res.Data.length; i++) {
									if (res.Data[i].GoodsId == plus.webview.currentWebview().ID) {
										_this.tb = "like";
									}
								}
							}
						});
					}

				}
			}

		})
	</script>
</html>